import { useState } from "react";
import "./assets/App.css";

const App = () => {
  /**
   * useState()函数返回一个数组
   *    - 数组中第一个元素是初始值。直接修改不会触发组件的重新渲染
   *    - 数组中第二个，是一个函数，通常命名为setXXX
   *        这个函数用来修改state，调用其修改state后会触发组件的重新渲染，
   *        并且使用函数中的值作为新的state值
   */
  let [data, setData] = useState({
    number: 1,
    name: "洪奇奇",
  });
  console.log(data);
  console.log(setData);
  const addNum = () => {
    data.number++;
    setData({ ...data, number: data.number });
  };
  const lessNum = () => {
    data.number--;
    setData({ ...data, number: data.number });
  };
  return (
    <div className="content">
      <button onClick={lessNum}>-</button>
      <span>姓名:{data.name}</span>
      <span>{data.number}</span>
      <button onClick={addNum}>+</button>
    </div>
  );
};

export default App;
